window.onload = function () {
	let tempArr = dataArr //备份数组，方便操作
	const tbody = document.querySelector(".tbody")
	rendering(tempArr) //初始渲染

	//计算总价值与总数量
	function sum() {
		let sum = 0
		let checkNum = 0
		document.querySelectorAll(".tbody .tr .td input").forEach(function (item, index) {
			item.checked &&
				(sum += document.querySelectorAll(".tbody .tr")[index].children[2].innerText * document.querySelectorAll(".tbody .tr .my-input-number .my-input__inner")[index].innerText) &&
				checkNum++
		})
		document.querySelector(".right-box .price-box .price").innerText = sum
		document.querySelector(".right-box .pay").innerText = `结算( ${checkNum} )`
	}

	//选中按钮
	function checkBtn() {
		document.querySelectorAll(".tbody .tr .td input").forEach((item, index) => {
			item.addEventListener("click", () => {
				;(tempArr[index].isChecked = item.checked) && rendering(tempArr)
				sum()
				isAll()
			})
		})
	}

	//全选检测
	function isAll() {
		document.querySelector(".bottom .check-all input").checked = true
		document.querySelectorAll(".tbody .tr .td input").forEach((item, index) => {
			!(tempArr[index].isChecked = item.checked) && (document.querySelector(".bottom .check-all input").checked = false)
		})
	}

	//删除功能
	function deleteBtn() {
		document.querySelectorAll(".del").forEach(item => {
			item.addEventListener("click", () => tempArr.splice(item.dataset.index, 1) && rendering(tempArr))
		})
	}

	//加减按钮
	function changeBtn() {
		document.querySelectorAll(".decrease").forEach((item, index) => {
			item.addEventListener("click", () => {
				item.nextElementSibling.innerText > 0 && tempArr[index].num--
				rendering(tempArr)
				sum()
			})
		})
		document.querySelectorAll(".increase").forEach((item, index) => {
			item.addEventListener("click", () => {
				item.previousElementSibling.innerText < 999 && tempArr[index].num++
				rendering(tempArr)
				sum()
			})
		})
	}

	//全选按钮
	document.querySelector(".bottom .check-all input").addEventListener("click", function () {
		!tempArr.forEach(item => (item.isChecked = this.checked)) && rendering(tempArr)
	})

	//渲染页面
	function rendering(arr = []) {
		tbody.innerHTML = ""
		arr.forEach((item, index) => {
			tbody.innerHTML += `
                 <div class="tr">
                    <div class="td"><input type="checkbox" ${item.isChecked && "checked"} /></div>
                    <div class="td"><img src=${item.icon} alt="" /></div>
                     <div class="td">${item.price}</div>
                     <div class="td">
                        <div class="my-input-number">
                            <button class="decrease"> - </button>
                            <span class="my-input__inner">${item.num}</span>
                            <button class="increase"> + </button>
                        </div>
                     </div>
                     <div class="td">${item.num * item.price}</div>
                     <div class="td"><button class="del" data-index="${index}">删除</button></div>
                 </div>
             `
		})
		changeBtn() //加减按钮事件绑定
		deleteBtn() //删除按钮事件绑定
		checkBtn() //单选按钮事件绑定
		sum() //求和计算
	}
}
